<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist-vue3基础版</title>
    <style>
        .span-type {
            padding: 5px;
        }

        .span-type-active {
            color: #fff;
            background-color: #ac1111;
        }
    </style>
</head>

<body>
    <main id="app">
        <h2>学生增加</h2>
        <div class="form">
            <div class="form-item">
                <label class="form-item__label" for="name">学生姓名</label>
                <div class="form-item__content">
                    <input class="input" type="text" maxlength="10" id="name" v-model="formData.name">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label">性别</label>
                <div class="form-item__content">
                    男<input class="input" type="radio" name="sex" value="男" v-model="formData.sex">
                    女<input class="input" type="radio" name="sex" value="女" v-model="formData.sex">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label" for="tel">电话号码</label>
                <div class="form-item__content">
                    <input class="input" type="text" maxlength="11" id="tel" v-model="formData.tel">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item__label">专业</label>
                <div class="form-item__content">
                    <select v-model="formData.major">
                        <option value=""></option>
                        <option value="JAVA">JAVA</option>
                        <option value="WEB">WEB</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <button id="submit" class="button button--primary" style="margin-left: 120px;"
                    @click="handleSubmit">确认</button>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>编码</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>专业</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in computedList" :key="item.id">
                    <td><input type="checkbox" :value="item.id" v-model="selectIds"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.major}}</td>
                    <td>{{item.tel}}</td>
                    <td>
                        <span @click="handleDeleteRow(item.id)" class="iconfont icon-del">删除</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="tfoot">
            <span class="span-type">{{leftCount}}未选</span>
            <span @click="handleType(1)" :class="getClass(1)">全部</span>
            <span @click="handleType(2)" :class="getClass(2)">未选中</span>
            <span @click="handleType(3)" :class="getClass(3)">选中</span>
            <span @click="handleDelete" class="span-type">删除选中</span>
        </div>
    </main>
</body>
<!-- 引入vue3.js，通过引入该文件，会有一个Vue的全局对象 -->
<script src="../../../js/vue.global.js"></script>
<script>
    // 通过解构的方式，获取Vue对象中相应的函数
    const { createApp, reactive,ref,computed } = Vue;


    let id = 100;

    // vue3使用createApp来创建vue对象，而不是使用构造函数
    const vue = createApp({
        setup() {
            
            const formData = reactive({});
            // 选中项
            const selectIds = ref([]);
            const listData = reactive([
                {
                    id: 0,
                    name: "Hydra",
                    sex: "男",
                    tel: "13547811112",
                    major: "JAVA"
                },
                {
                    id: 1,
                    name: "王珂",
                    sex: "男",
                    tel: "13547811113",
                    major: "WEB"
                },
                {
                    id: 2,
                    name: "聂仔欣",
                    sex: "男",
                    tel: "13547811114",
                    major: "JAVA"
                }
            ]);

            // 选中的项目
            const type = ref(1);

            // 点击行后面的删除，删除当前行
            function handleDeleteRow(id) {
                let index = listData.findIndex(v => v.id == id);
                listData.splice(index, 1);

                // 把存储选中项的也删除
                index = selectIds.value.findIndex(v => v == id);
                if (index != -1) {
                    selectIds.value.splice(index, 1);
                }
            }

            function handleSubmit() {
                // 最好，拷贝一份formData，添加到列表中
                const newRow = { ...formData, id: id++ };
                listData.push(newRow);
                console.log("newRow = ", newRow);
                // 错误，reactvie包装的对象不能重新赋值，否则会失去响应式效果
                // formData = {};
                // 如何清空对象的属性？
                for (let v in formData) {
                    delete formData[v];
                }
            }

            function getClass(value) {
                return {
                    // 当对象的属性值为true的时候，表示有该属性名的class值
                    'span-type-active': type.value == value,
                    'span-type': true
                }
            }

            function handleType(value) {
                type.value = value;
            }

            function handleDelete() {
                // 从listData中删除在selectIds中的所有数据
                // 把未选中的数据拿出来，然后复制给listData
                const result = listData.filter(v1 => selectIds.value.findIndex(v2 => v2 == v1.id) == -1);

                // 把selectIds也清空
                selectIds.value.length = 0;

                // 数组清空：把长度赋值为0
                listData.length = 0;
                // 添加元素
                listData.push(...result);
            }

            const computedList = computed(() => {
                // console.log("selectIds = ",selectIds);
                switch (type.value) {
                    // 选中
                    case 3 : {
                        return listData.filter(v1 => selectIds.value.findIndex(v2 => v2 == v1.id) != -1);
                    }
                    // 未选中
                    case 2 : {
                        return listData.filter(v1 => selectIds.value.findIndex(v2 => v2 == v1.id) == -1)
                    }
                    default: return listData;
                } 
            })

            const leftCount = computed(() => listData.length - selectIds.value.length);

            // setup函数需要返回一个对象，以暴露需要用到的数据
            return {
                formData,
                listData,
                handleDeleteRow,
                selectIds,
                handleSubmit,
                getClass,
                handleType,
                computedList,
                leftCount,
                handleDelete
            }
        }
    });

    // vue3是mount不是$mount
    vue.mount("#app")

</script>

</html>